<template>
  <div class="app-container">
  <el-card class="box-card">
      <el-form ref="form" :model="form">
        <el-descriptions title="值班记录基本信息" style="text-align: center" :column="3" border>
          <el-descriptions-item label="日期" :span="2" label-class-name="my-label" :contentStyle='contentStyle':labelStyle="labelStyle">
            {{form.dutyDate }}
          </el-descriptions-item>
          <el-descriptions-item label="值班SZ" :span="2" label-class-name="my-label" :contentStyle='contentStyle':labelStyle="labelStyle">
            {{ form.dutyLeader }}
          </el-descriptions-item>
          <el-descriptions-item label="值班情况" :span="4" label-class-name="my-label":contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.dutyCondition  }}
          </el-descriptions-item>

<!--          <el-descriptions-item label="部门" :span="1" label-class-name="my-label" :labelStyle="labelStyle">{{
            form.dept.deptName}}
          </el-descriptions-item>-->
          <el-descriptions-item label="待处理情况" :span="4" label-class-name="my-label" :contentStyle='contentStyle':labelStyle="labelStyle">
            {{ form.pendingCondition }}
          </el-descriptions-item>
          <el-descriptions-item label="接班员" :span="2" label-class-name="my-label":contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.carryPerson }}
          </el-descriptions-item>
          <el-descriptions-item label="交班时间" :span="2" label-class-name="my-label":contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.logTime }}
          </el-descriptions-item>



        </el-descriptions>

      </el-form>
<br/>
      <div style="float:right; margin-bottom: 15px;">

        <el-button @click="viewCancel">返 回</el-button>
      </div>
  </el-card>
  </div>
</template>
<style>
  .img-box1 {
    white-space: pre-wrap;
    width: 90%;

    position: center;
    margin:20px auto;
  }
  .img-box1 img {
    width: 70%;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .imgpre{
    width:200px;
    height: 100px;


  }
  .ifr{
    width: 70%;
    height: 700px;

    position: relative;
    left: 50%;
    transform: translateX(-50% );
  }


  .input_text input.el-input__inner {
    border: none
  }

  input:disabled{

    background-color: #F5F5F5;

    color:#F5F5F5;
  }

</style>
<script>


  import { getToken } from "@/utils/auth";
  import { listDutyrecord, getDutyrecord, delDutyrecord, addDutyrecord, updateDutyrecord } from "@/api/module/dfx/dutyrecord";
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "Dutyrecord",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 值班记录表格数据
        dutyrecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dutyDate: null,
          dutyTime: null,
          dutyPerson: null,
          dutyPersonIdNumber: null,
          dutyLeader: null,
          dutyCondition: null,
          pendingCondition: null,
          logTime: null,
          carryPerson: null,
          carryPersonIdNumber: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 用户查询参数
        view:{
          // 是否显示弹出层（用户查询）
          open: false,
          // 弹出层标题（用户查询）
          title: "",
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {

      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息

        getDutyrecord(id).then(res => {

          this.form = res.data;

        });

      }

    },
    methods: {


      /** 关闭按钮 */
      viewCancel() {
        const id = this.$route.query.id;
        getDutyrecord(id).then(response => {
          this.form = response.data;

        });
        const obj = { path: "/zonghe/dfxdutyrecord", query: {id} };
        this.$tab.closeOpenPage(obj);
      }
    },

  };
</script>






